    <!DOCTYPE html>  

	<html lang="en">  

	<head>  

	    <meta charset="UTF-8">  

	    <meta name="viewport" content="width=device-width, initial-scale=1.0">  

	    <title>数据库查询界面</title>  

	    <link rel="stylesheet" href="style.css">  

	</head>  

	<body>  
		<div class="video-background">  
			<video autoplay muted loop>  
				<source src="background.mp4" type="video/mp4">  
				Your browser does not support the video tag.  
			</video>  
		</div>  

	    <div class="query-interface">  

	        <h1>数据库查询</h1>  

	        <form id="queryForm">  

	            <label for="searchInput">搜索内容:</label>  

	            <input type="text" id="searchInput" name="search" placeholder="请输入搜索内容关键词...">  

	            <button type="submit">猛猛查一下</button>  

	        </form>  
			<form id="addDataForm">  
				<h2>添加数据</h2>  
				<label for="nameInput">名称:</label>  
				<input type="text" id="nameInput" name="name" placeholder="请输入名称...">  
				<label for="descriptionInput">描述:</label>  
				<textarea id="descriptionInput" name="description" placeholder="请输入描述..."></textarea>  
				<button type="submit">添加到数据库</button>  
				<div id="errorMessages" style="color: red;"></div> 
			</form>  
			<script>  
				document.getElementById('addDataForm').addEventListener('submit', function(event) {  
					var errorMessages = '';  
					var name = document.getElementById('nameInput').value.trim();  
					var description = document.getElementById('descriptionInput').value.trim();  
			  
					if (name === '') {  
						errorMessages += '名称不能为空。\n';  
					}  
					if (description === '') {  
						errorMessages += '描述不能为空。\n';  
					}  
			  
					if (errorMessages) {  
						event.preventDefault(); 
						document.getElementById('errorMessages').textContent = errorMessages;  
					} else {  
						document.getElementById('errorMessages').textContent = '';  
					}  
				});  
			</script>

	        <div id="results"></div>  

	    </div>  
		<script>  
			document.getElementById('queryForm').addEventListener('submit', function(event) {  
    			event.preventDefault();   
  
    			var searchInput = document.getElementById('searchInput').value.trim();  
  
    			if (searchInput === '') {  
        			alert('请输入搜索内容！');  
        			return;  
   			 }  
  
    			fetch('这里填写后端的url', {  
        			method: 'POST',  
        			headers: {  
         			   'Content-Type': 'application/json'  
       			 },  
       			 body: JSON.stringify({ search: searchInput })  
   			 })  
   			 .then(response => response.json())  
    			.then(data => {  
       			 document.getElementById('results').innerHTML = '<p>查询结果:</p><ul>' + data.map(item => `<li>${item}</li>`).join('') + '</ul>';  
   			 })  
   			 .catch(error => console.error('Error:', error));  
			});
			document.getElementById('addDataForm').addEventListener('submit', function(event) {  
				event.preventDefault();
		  
				var name = document.getElementById('nameInput').value.trim();  
				var description = document.getElementById('descriptionInput').value.trim();  
		  
				var errorMessages = '';  
				if (name === '') {  
					errorMessages += '名称不能为空。\n';  
				}  
				if (description === '') {  
					errorMessages += '描述不能为空。\n';  
				}  
		  
				if (errorMessages) {  
        			event.preventDefault();  
        			document.getElementById('errorMessages').textContent = errorMessages;  
    			} else {  
        			fetch('/add-data', {  
            			method: 'POST',  
            			headers: {  
                			'Content-Type': 'application/json'  
            			},  
            			body: JSON.stringify({ name: name, description: description })  
       			 })  
        			.then(response => response.json())  
        			.then(data => {  
           			 alert('数据添加成功！');  
        			})  
        			.catch(error => console.error('Error:', error));  
  
        			event.preventDefault();   
    			}  
			});
		</script>			
	</body>  

    </html>
